<template>
	<div class="main">
		<cvue-dialog :dialogVisible='dialogVisible' title='新增角色' :isShowFoot='true' dialogWidth='40%' @handleOpen='getDetail' @closeDialog='closeDialog' @confirmDialog='confirmDialog' @handleClose='closeDialog'>
			<div class="dialog-body" slot="dialogBody">
				<el-form label-width="130px">
					<el-form-item label="角色名称" required>
						<el-input class="formWidth" type="text" v-model.trim="roleItem.roleName" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="身份类型" required>
						<el-checkbox-group v-model="checkList">
							<el-checkbox v-for="item in typeList" :key="item.id" :label="item">{{item.name}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="是否启用">
						<el-switch v-model="roleItem.isActive">
						</el-switch>
					</el-form-item>
					<el-form-item label="是否默认配置">
						<el-switch v-model="roleItem.isDefaultConfig">
						</el-switch>
					</el-form-item>
					<el-form-item label="菜单权限">
						<div v-for="(item,index) in checkList" :key="item.id">
							<p><i @click="show(item,index)" v-if="!item.show" class="el-icon-folder-add"></i><i @click="show(item,index)" v-else class="el-icon-folder-remove"></i>{{item.name}}</p>
							<el-tree v-show="item.show" :ref="item.id" :data="treeData" show-checkbox node-key="permissionCode" :props="defaultProps">
							</el-tree>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</cvue-dialog>
	</div>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
import cvueDialog from '@/components/cvue-dialog'
import upload from '@/components/upload2'
export default {
	name: 'editList',
	components: {
		cvueDialog, upload
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			title: '',
			url: '',
			mark: '',
			permissionCode: '',
			checkList: [],
			typeList: [],
			sort: 0,
			isActive: false,
			isCommon: false,
			terminalType: '',
			treeData: [],
			defaultProps: {
				children: 'childMenusTreeList',
				label: 'columnName'
			}
		}
	},
	computed: {
		roleItem() {
			return this.$store.state.role.roleItem
		},
		defaultCheckList() {
			return this.roleItem.identityTypes
		}
	},
	methods: {
		show(item, index) {
			item.show = item.show ? false : true
			this.checkList.splice(index, 1, item)
		},
		getDetail() {
			this.getRoleType()
			this.getMenu()
		},
		closeDialog() {
			this.$emit('closeDialog')
		},
		confirmDialog() {
			this.editList()
		},
		getRoleType() {
			this.$store.dispatch('role/GetRoleType').then(
				res => {
					this.typeList = res
					this.typeList.forEach(
						item => {
							item.show = false
						}
					)
					this.defaultCheckList.forEach(
						item => {
							this.typeList.forEach(
								item2 => {
									if (item == item2.name) {
										this.checkList.push(item2)
									}
								}
							)
						}
					)
				}
			)
		},
		getMenu() {
			this.$store.dispatch('role/GetMenu').then(
				res => {
					this.treeData = res
					this.roleItem.identitySystemList.forEach(
						item => {
							var refTree = item.userRoleIdentityId
							this.$refs[refTree][0].setCheckedKeys(item.permissionCode)
						}
					)
				}
			)
		},
		editList() {
			if (!this.check()) {
				return
			}
			var systemList = []
			this.checkList.forEach(
				item => {
					var refTree = item.id
					var arr = this.$refs[refTree][0].getCheckedKeys()
					var obj = { userRoleIdentityId: item.id, permissionCode: arr }
					systemList.push(obj)
				}
			)
			var params = {
				roleManageId: this.roleItem.id,
				roleName: this.roleItem.roleName,
				isActive: this.roleItem.isActive,
				isDefaultConfig: this.roleItem.isDefaultConfig,
				identitySystemList: systemList
			}
			this.$store.dispatch('role/EditRole', params).then(
				res => {
					this.$message.success('编辑成功')
					this.$emit('confirmDialog')
				}
			)
		},
		check() {
			if (!this.roleItem.roleName) {
				this.$message.error('角色名称不能为空')
				return false
			}
			if (this.checkList.length == 0) {
				this.$message.error('请选择身份类型')
				return false
			}
			var flag = true
			this.checkList.forEach(
				item => {
					var refTree = item.id
					var arr = this.$refs[refTree][0].getCheckedKeys()
					if (arr.length == 0) {
						this.$message.error('请选择' + item.name + '的菜单权限')
						flag = false
						return
					}
				}
			)
			if (!flag) {
				return false
			}
			return true
		}
	}
}
</script>
<style scoped>
.main {
	background: #fff;
}
</style>
